<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          登陆日志
        </p>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :importBtn="false"
                  :downTemplate="false"
                  :exportBtn="false"
                  :batchDelBtn="false"
                  :addBtn="false"
                  :isControl="false"
                  :operate="operate"
                  placeholder="操作人关键字"
                  searchText="操作者："
                  cleanText="刷新"
                  v-on:searchFn="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:restFn="restFn">
          <div slot="search" class="db_inline">
            操作结果：
            <Select v-model="searchParam.description" @on-change="queryFn" style="width:100px;margin: 0 10px 0 0">
              <Option v-for="item in descriptionList" :value="item.value" :key="item.value" >{{ item.label }}</Option>
            </Select>
            操作时间：
            <DatePicker type="date" v-model="searchParam.bTime"  @on-change="bTimeChange" placeholder="查询开始时间" style="width: 120px"></DatePicker>
            至
            <DatePicker type="date" v-model="searchParam.eTime"   @on-change="eTimeChange" placeholder="查询结束时间" style="width: 120px"></DatePicker>
          </div>
        </VmBtable>
      </Card>
    </Row>
  </div>
</template>

<script>
  import API from "@/api/api";
  import VmBtable from "@/components/vm/vm-btable";
  import moment from 'moment'

  export default {
    components: {
      VmBtable
    },
    data() {
      return {
        searchParam:{
          current:1,
          size:20,
          total:0,
          fullName:'',
          bTime:'',
          eTime:'',
          description:'',
        },
        descriptionList:[{value:'',label:'全部'},{value:'成功',label:'成功'},{value:'失败',label:'失败'}],
        dataColumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width:100
          },
          {
            title: '操作者',
            align: 'center',
            key: 'fullName',
          },
          {
            title: '操作模块',
            align: 'center',
            key: 'operationModule',
            width:160
          },
          {
            title: '具体操作',
            align: 'center',
            key: 'operationType',
            width:200
          },
          {
            title: '执行方法',
            align: 'center',
            key: 'operationMethod',
            width:240
          },

          {
            title: '操作时间',
            align: 'center',
            key: 'operationTime',
            sortable:true,
            sortType:'desc',
            width:180
          },
          {
            title: '远程地址',
            align: 'center',
            key: 'operatorIp',
            width:150
          },
          {
            title: '结果',
            align: 'center',
            key: 'description',
          },
        ],
        operate: [],
        dataTable: []
      };
    },
    methods: {
      restFn() {
        this.searchParam.current = 1;
        this.searchParam.size = 20;
        this.searchParam.username = '';
        this.searchParam.bTime = '';
        this.searchParam.eTime = '';
        this.searchParam.description = '';
        this.queryFn();
      },
      queryFn() {
        API.getOperationLog(this.searchParam).then(
          res => {
            let data = res.data;
            this.dataTable = data.records;
            this.searchParam.total = data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      bTimeChange(data,type){
        this.searchParam.bTime=moment(data).format('YYYYMMDD');
        this.queryFn();
      },
      eTimeChange(data,type){
        this.searchParam.eTime=moment(data).format('YYYYMMDD');
        this.queryFn();
      },
      pageChangeFn(current){
        this.searchParam.current = current;
        this.queryFn();
      },
      searchFn(value) {
        this.searchParam.fullName = value;
        this.queryFn();
      },
    },
    created() {
    },
    mounted() {
      this.queryFn();
    }
  }
</script>

<style scoped>

</style>
